<template>
  <div class="box">
    <div class="left">
      <h2>{{problems[0].paperName}}</h2>
      <div class="problem" v-for="(item,index) in problems">
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span>第{{index+1}}题、{{item.title}}</span>
          </div>
          <div class="text item">
            <el-radio-group v-model="options[index]">
              <el-radio label="A">{{item.optionA}}</el-radio>
              <el-radio label="B">{{item.optionB}}</el-radio>
              <el-radio label="C">{{item.optionC}}</el-radio>
              <el-radio label="D">{{item.optionD}}</el-radio>
            </el-radio-group>
          </div>
        </el-card>
      </div>
    </div>
    <div class="right">
      <div class="paperUser">
        <el-descriptions title="题目信息" :column="1" >
          <el-descriptions-item label="上传者">{{problems[0].name}}</el-descriptions-item>
          <el-descriptions-item label="题数">{{problems[0].problemNum}}</el-descriptions-item>
          <el-descriptions-item label="答题时间">{{problems[0].answerTime}}</el-descriptions-item>
          <el-descriptions-item label="已答">
            <el-tag size="small">{{problems[0].frequency}}人</el-tag>
          </el-descriptions-item>
        </el-descriptions>
        <el-statistic @finish="hilarity" format="HH:mm:ss" :value="Date.now() + 1000 * 60 * problems[0].answerTime" time-indices />
        <button @click="up">交卷</button>
      </div>
      <div class="right-main">
        <i class="el-icon-s-data" style="margin-top: 10px" >高分学生</i>
        <hr style="margin: 5px;background-color: #888888; height:1px; border:none">
        <div v-for="(item,index) in hotStu" style="display: flex;flex-direction: column; align-items: flex-start;margin-left: 5px;margin-top: 10px">
          <p class="right-title" @click="jump(item)">{{item.name}}</p>
          <p style="margin-left: 10px;font-size: 5px;color: #a6a6a6">分数 : {{item.score}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "PaperStu",
  data(){
    return{
      problems:[],
      options:[],
      paperId:this.$route.query.paperId,
      score:0,
      user:this.$sessionGet(),
      hotStu:[]
    }
  },
  methods:{
    hilarity() {
      this.$notify({
        title: '提示',
        message: '时间已到，你可知寸金难买寸光阴？',
        duration: 0,
      });
    },
    up(){
      console.log(this.options)
      for (let i=0; i<this.problems.length; i++){
        if(this.problems[i].correct == this.options[i]){
          console.log("defen")
          this.score += 1;
        }
      }
      console.log("得分"+ this.score)

      this.$axios.post("/paper/rollIn", this.$qs.stringify({
        id:this.user.id,
        paperId:this.paperId,
        score:this.score
      }))
          .then(resp=>{
            this.$router.push('square')
          })
          .catch(error=>{
            console.log(error)
          })
    },
    getProblemsAndUser(){
      this.$axios.get("/paper/getProblemsAndUserByPaperId?paperId=" + this.paperId)
          .then(resp=>{
            console.log("题目")
            console.log(resp)
            this.problems = resp.data.data
            this.paperName = resp.data.data[0].paperName;
            this.problems.forEach(p=>{
              this.options.push("");
            })
            console.log(this.options)
          })
          .catch(error=>{
            console.log(error)
          })
    },
    getHotStu(){
      this.$axios.get("/paper/hotStu?paperId=" + this.paperId)
          .then(resp => {
            this.hotStu = resp.data.data;
            console.log(resp)
          })
          .catch(error => {
            console.log(error)
          })
    }
  },
  created() {
    this.getProblemsAndUser();
    this.getHotStu();
  }
}
</script>

<style scoped>
.right-main{
  margin-top: 50px;
  background-color: #ffffff;
  border-radius: 15px;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.box-card {
}
.problem{
  display: flex;
  flex-direction: column;
}
.paperUser{
  border-radius: 30px;
  padding: 20px;
}
.right{
  margin-top: 20px;
  margin-right: 20px;
  border-radius: 30px;
  width: 800px;
  height: 100%;
}
.box {
  width: 100%;
  border-radius: 30px;
  display: flex;
  justify-content: center;
}
.left {
  background-color: #fff;
  padding: 20px;
  margin: 20px;
  text-align: left;
  border-radius: 20px;
  width: 2500px;
}
</style>